<template>
  <el-dialog title="选择学生" :close-on-click-modal="false" :destroy-on-close="true" width="800px" :visible.sync="isShow" :before-close="closeBox">
    <div class="online-diglogBox">
      <div class="online-diglogCon">
        <div class="online-dialogTitle">{{info.lessonProject}}</div>
        <div class="online-item">主讲：{{info.speaker}}</div>
        <div class="online-item">时间：{{info.startTime}} - {{info.endTime}}</div>
        <el-radio-group v-model="radio" style="width: 100%;" @change="handleRadio">
          <el-radio :label="index" border v-for="(item, index) in list" :key="index">{{item.className}}</el-radio>
        </el-radio-group>
      </div>
      <div class="online-diglogCon">
        <div class="online-dialogTitle">在线用户列表</div>
        <div class="online-studentBox">
          <div class="online-stu" v-for="(item, index) in stuList" :key="index" @click="joinList(item)">
            <i class="el-icon-success" v-if="classStuIds.indexOf(item.studentId) > -1"></i>
            <img class="online-studentLogo" :src="item.headImgUrl"/>
            <div class="online-studentName">{{item.name}}</div>
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer" style="text-align: center;">
      <el-button type="primary" @click="submitForm">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getOnlineStuList, startRollCall } from '@/api/teacher/onlineCourse'
export default {
  props: ['id', 'info', 'roll'],
  data () {
    return {
      isShow: true,
      list: [],
      stuList: [],
      classId: undefined,
      radio: 0,
      classStuIds: []
    }
  },
  methods: {
    async getOnlineStuList () {
      const res = await getOnlineStuList({ onlineLessonId: this.id })
      if (res.code === '200') {
        this.list = res.data
        if (this.list.length > 0) {
          this.stuList = this.list[0].studentList
          this.classId = this.list[0].classId
        }
      }
    },
    async startRollCall (data) {
      const res = await startRollCall(data)
      if (res.code === '200') {
        if (res.data.flagCode === '1000') {
          this.$message.error(res.data.returnMessage)
        } else {
          this.$message.success('操作成功')
          // 重新刷新活动列表
          this.$emit('handleEmit', 'confirm')
        }
      } else {
        this.$message.error(res.message)
        this.closeBox()
      }
    },
    // 切换班级显示不同在线学生
    handleRadio () {
      this.stuList = this.list[this.radio].studentList || []
      this.classId = this.list[this.radio].classId || ''
    },
    joinList (item) {
      const index = this.classStuIds.indexOf(item.studentId)
      if (index > -1) {
        this.classStuIds.splice(index, 1)
      } else {
        this.classStuIds.push(item.studentId)
      }
    },
    submitForm () {
      this.classStuIds = this.classStuIds.map(item => this.classId + '_' + item)
      const data = {
        onlineLessonId: this.id,
        isLimited: this.roll.isLimited,
        limitedTime: this.roll.limitedTime,
        password: this.roll.password,
        callRollType: this.roll.callRollType,
        classStuIds: this.classStuIds.join(',')
      }
      this.startRollCall(data)
    },
    closeBox () {
      this.$emit('handleEmit')
    }
  },
  mounted () {
    this.getOnlineStuList()
  }
}
</script>

<style scoped lang="scss" rel="stylesheet/scss">
  .el-radio{
    display: block;
    margin-right: 0;
    margin-top: 10px;
  }
  .el-radio.is-bordered+.el-radio.is-bordered{
    margin-left: 0;
  }
</style>
